<template>


        <div class="super_container">
                
            
                <!-- Home -->

                <!--包含头部和左侧菜单-->

                <myheader></myheader>
            
                <div style="margin-top:150px;"></div>
            
                <div class="boxes">
                    <div class="section_container">
                        <div class="container">
                          <div align='center'><h1>注册</h1></div>

                          <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="用户名">
                              <el-input placeholder="请输入用户名" v-model="account"></el-input>
                            </el-form-item>

                            <el-form-item label="密码">
                              <el-input type='password' placeholder="请输入密码" v-model="pwd1"></el-input>
                            </el-form-item>

                            <el-form-item label="密码">
                              <el-input type='password' placeholder="请确认密码" v-model="pwd2"></el-input>
                            </el-form-item>

                            <el-form-item label="性别">
                              <el-input placeholder="请输入性别：男|女" v-model="gender"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="邮箱">
                              <el-input placeholder="请输入邮箱" v-model="email"></el-input>
                            </el-form-item>

                            <el-form-item label="手机号">
                              <el-input placeholder="请输入手机号" v-model="phone"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="验证码">
                            <el-input placeholder="请输入验证码" style="width: 30%" v-model="sms"></el-input>
                              <el-button>
                                <span v-show="show" @click="getCode">获取验证码</span>
                                <span v-show="!show" class="count">{{count}} s</span>
                              </el-button>
                            </el-form-item>

                            <el-form-item label="地址">
                              <el-input placeholder="请输入地址" v-model="address"></el-input>
                            </el-form-item>

                            <el-form-item label="社交">
                              <el-input placeholder="请输入社交布尔值" v-model="social"></el-input>
                            </el-form-item>

                            <el-form-item>
                              <el-button v-on:click='getApiData_post'>注册</el-button>
                              <el-button type="reset">重置</el-button>
                              <el-button><router-link :to="'login'">登陆</router-link></el-button>
                            </el-form-item>

                          </el-form>
                        </div>
                    </div>
                </div>
               
                <div style="margin-top:350px;"></div>
                

                <myfooter></myfooter>
            
            
            </div>

      
</template>
      
      
       
      <script>



        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
  
      export default {
        data () {
          return {
            msg: "这是一个变量",
            dataList:[],

            account:'',
            pwd1:'',
            pwd2:'',
            gender:'',
            email:'',
            phone:'',
            sms:'',
            address:'',
            social:'',

            show: true,  // 初始启用按钮
            count: '',   // 初始化次数
            timer: null,


            clicked:0,
            upath: '',
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

            this.common.get_menu();
            
        
      
      },
        methods:{
            changetest(index){
                this.clicked = index;
            },
            getCode(){
              //定义url
              let url = this.base_url + '/user/get_code'
              //定义中介：因为向异步框架发送请求
              // var _this = this
              var data = {
                'phone':this.phone
              }
              //使用axios发送异步请求
              this.axios.post(url,this.qs.stringify(data))
                 const TIME_COUNT = 60; 
                 if (!this.timer) {
                   this.count = TIME_COUNT;
                   this.show = false;
                   this.timer = setInterval(() => {
                   if (this.count > 0 && this.count <= TIME_COUNT) {
                     this.count--;
                    } else {
                     this.show = true;
                     clearInterval(this.timer); // 清除定时器
                     this.timer = null;
                    }
                   }, 1000)
                  }
              },
            //定义异步跨域方法
            getApiData_post:function(){
              //定义url
              let url = this.base_url + '/user/register'
              
              //定义中介：因为向异步框架发送请求
              var _this = this

              var data = {
                'account':this.account,
                'pwd1':this.pwd1,
                'pwd2':this.pwd2,
                'gender':this.gender,
                'email':this.email,
                'phone':this.phone,
                'sms':this.sms,
                'address':this.address,
                'social':this.social
              }
              //使用axios发送异步请求
              this.axios.post(url,this.qs.stringify(data))
              .then(function(result){
                console.log(result)
                 _this.code = result.data.code;
                 console.log(_this.code)
                 if(_this.code == 200){
                  alert('注册成功')
                  _this.$router.push('/is_active')
                  // _this.$router.push('/login')
                 }else{
                   console.log(result.data)
                 }
              });
              Cookies.set('username', _this.account,{ expires: 7 })
            },
      }
      }

      </script>
       
      <style>
      
      
      
      </style>